<template>
  <div id="book2">
    <div id="focus">
      <ul id="hd_d" style="left:0;top:0;">
        <li>
          <img src="@/assets/书架/6_u4083.png" alt />
          <div><span>0%</span></div>
          <p>月色朦胧</p>
        </li>
        <li v-for="(value,key,index) in booksinfo" :key="index">
          <img :src="value.img" alt />
          <div><span>{{value.rate}}%</span></div>
          <p>{{value.name}}</p>
        </li>
        <li>
          <img src="@/assets/书架/1_u4074.png" alt />
          <div><span>1.6%</span></div>
          <p>生死疲劳</p>
        </li>
      </ul>
    </div>
    <div id="current">
      <span class="btn greenspan"></span>
      <span class="btn"></span>
      <span class="btn"></span>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      booksinfo: {
        book1: {
          name: "生老疲劳",
          rate: 1.6,
          img: require("@/assets/书架/1_u4074.png")
        },
        book2: {
          name: "国王",
          rate: 0,
          img: require("@/assets/书架/3_u4078.png")
        },
        book3: {
          name: "月色朦胧",
          rate: 0,
          img: require("@/assets/书架/6_u4083.png")
        }
      }
    };
  },
  mounted() {
    let hd_w = document.getElementById("focus");
    let hd_d = document.getElementById("hd_d");
    let spanbox = document.getElementsByClassName("btn");
    let a = 0;
    let n = 0;
    let spantime = setInterval(runspan, 3000);
    function runspan() {
      for (let i = 0; i < spanbox.length; i++) {
        spanbox[i].classList.remove("greenspan");
      }

      spanbox[n].classList.add("greenspan");
      n++;
      if (n > 2) {
        n = 0;
      }
    }
    let time = setInterval(run, 3000);
    function run() {
      a++;
      if (a == 4) {
        a = 1;
      }
      let movex = -34.5 * a;
      hd_d.style.left = movex + "rem";
    }
    hd_w.addEventListener("touchstart", star, false);
    let dl;
    let starx;
    let moveX;
    let newx;
    function star(event) {
      let e = event || window.event;
      dl = parseInt(hd_d.style.left);
      starx = e.changedTouches[0].clientX;
      clearInterval(time);
      clearInterval(spantime);
    }
    hd_w.addEventListener("touchmove", move, false);
    function move(event) {
      let c = event || window.event;
      moveX = c.changedTouches[0].clientX;
      newx = moveX - starx;
      let length = newx + dl;
      hd_d.style.left = length + "px";
    }
    hd_w.addEventListener("touchend", end, false);
    function end() {
      time = setInterval(run, 3000);
      spantime = setInterval(runspan, 3000);
      let k;
      if (newx < 0) {
        a = a + 1;
        n = n + 1;
        k = -34.5 * a;
        hd_d.style.left = k + "rem";
        for (let i = 0; i < spanbox.length; i++) {
          spanbox[i].classList.remove("greenspan");
        }
        spanbox[n].classList.add("greenspan");
        if (n == 3) {
          n= 0;
          for (let i = 0; i < spanbox.length; i++) {
            spanbox[i].classList.remove("greenspan");
          }
          spanbox[n].classList.add("greenspan");
        }
        if (a == 4) {
          a = 1;
          k = -34.5 * a;
          hd_d.style.left = k + "rem";
        }
      }
      if (newx > 0) {
        a = a - 1;
        n = n - 1;
        k = -34.5 * a;
        hd_d.style.left = k + "rem";
        for (let i = 0; i < spanbox.length; i++) {
          spanbox[i].classList.remove("greenspan");
        }
        spanbox[n].classList.add("greenspan");
        if (n < 0) {
          n = 2;
          for (let i = 0; i < spanbox.length; i++) {
            spanbox[i].classList.remove("greenspan");
          }
          spanbox[n].classList.add("greenspan");
        }
        if (a == 0) {
          a = 4;
          k = -34.5 * a;
          hd_d.style.left = k + "rem";
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
#book2 {
  width: 100%;
  height: 60rem;
  overflow: hidden;
  #focus {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    height: 40rem;
    margin-top:2rem ;
    ul {
      width: 500%;
      list-style: none;
      position: absolute;
      display: flex;
      transition: all 0.3s;
      li {
        width: 34.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        div{
            position: absolute;
            width: 7.7rem;
            height: 7.7rem;
            background: url("@/assets/书架/u4076.svg") no-repeat;
            background-size: contain;
            left: 3.6rem;
            top: 0;
            span{
                position: absolute;
                left: 50%;
                top: 45%;
                transform: translate(-50%,-50%);
                font-weight: 400;
                font-size: 2rem;
                color: white;
            }
        }
        img{
            margin-left: 2rem;
        }
        p {
          margin-top: 2rem;
          font-family: "PingFangSC-Semibold", "PingFang SC Semibold",
            "PingFang SC";
          font-weight: 650;
          font-style: normal;
          font-size: 2.4rem;
          color: #000000;
          line-height: 2.4rem;
        }
      }
    }
  }
  #current {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    span {
      width: .8rem;
      height: .8rem;
      border-radius: 50%;
      background-color: #666666;
      margin: 0 .5rem;
    }
    .greenspan {
      background-color: rgba(65, 200, 114, 1);
    }
  }
}
</style>